<template>
	<view class="page">
		<!-- 编辑 -->
		<view class="article-edit">
			<view class="edit">
				<text>清空</text>
			</view>
			<view class="edit" @click="isEdit = !isEdit">
				<text>{{isEdit?'完成':'编辑'}}</text>
			</view>
		</view>
		<!-- 记录列表 -->
		<view class="record-data">
			<view class="record-list" v-for="(item,index) in 3" :key="index">
				<view class="record-date">
					<text>3月30日</text>
				</view>
				<view class="goods-list">
					<view class="list" v-for="(item,index) in 2" :key="index">
						<view class="check" :style="isEdit?'display: flex':'display: none'">
							<text class="iconfont icon-check"></text>
						</view>
						<view class="thumb">
							<image :src="'http://cn.shichengtai.xyz/goods/goods_thumb_0'+(index+1)+'.png'" mode=""></image>
						</view>
						<view class="item">
							<view class="title">
								<text class="two-omit">薇妮(Viney)时尚包包女包牛皮单肩包女休闲百搭斜挎包韩版小方包潮(枪色)</text>
							</view>
							<view class="price-more">
								<view class="price">￥188.00</view>
							</view>
							<view class="goods-btn">
								<view class="btn" @click="lookLike(item)">
									<text>看相似</text>
								</view>
								<view class="cart">
									<text class="iconfont icon-cart"></text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
    <!-- 看相似商品弹窗 -->
    <view class="cu-modal bottom-modal goods-win" :class="{'show':showLookLike}" @click="showLookLike = false">
      <view class="cu-dialog">
    		<view class="goods-title">
    			<view class="title">2个商品</view>
    		</view>
    		<view class="goods-list">
    			<view class="list" v-for="(item,index) in 2" :key="index">
    				<view class="thumb">
    					<image src="http://img0.imgtn.bdimg.com/it/u=791178039,1753704237&fm=26&gp=0.jpg" mode=""></image>
    				</view>
    				<view class="item">
    					<view class="title">
    						<text class="two-omit">爱国者充电宝 4000毫安快速充电 安全稳定 动感灯光 全新上市</text>
    					</view>
    					<view class="price-look">
    						<view class="price">
    							<text>￥167.00</text>
    						</view>
    						<view class="look">
    							<text>去看看&gt;</text>
    						</view>
    					</view>
    				</view>
    			</view>
    		</view>
    	</view>
    </view>
		<view class="footer-btn" :style="isEdit?'display: flex':'display: none'">
			<view class="btn">删除</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isEdit: false,
        showLookLike:false,//看相似  弹窗显示
			};
		},
    methods:{
      lookLike(item){//item是单击的那个  项
        this.showLookLike=true;//看相似  弹窗显示
      },
    },
	}
</script>

<style scoped lang="scss">
  /*每个页面公共css */
  @import '/colorui/main.css';
  @import '/colorui/icon.css';
  @import '/style/FontStyle.css';
.page{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #FFFFFF;
}
/* 编辑 */
.article-edit{
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10;
	/* #ifdef H5 */
	top: 88rpx;
	/* #endif */
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	height: 80rpx;
	background-color: #FFFFFF;
	.edit{
		width: 80rpx;
		height: 80rpx;
		text{
			font-size: 28rpx;
			color: #959595;
		}
	}
}
/* 记录列表 */
.record-data{
	width: 100%;
	margin-top: 88rpx;
	background-color: #FFFFFF;
	padding-bottom: 80rpx;
	.record-list{
		width: 100%;
		.record-date{
			display: flex;
			align-items: center;
			padding: 0 4%;
			height: 80rpx;
			border-bottom: 2rpx solid #f6f6f6;
			text{
				font-size: 34rpx;
				color: #222222;
			}
		}
		.goods-list{
			padding: 0 4%;
			.check{
				display: flex;
				align-items: center;
				width: 60rpx;
				height: 100%;
				text{
					color: #C0C0C0;
					font-size: 34rpx;
				}
			}
			.list{
				display: flex;
				align-items: center;
				width: 100%;
				height: 260rpx;
				margin-bottom: 10rpx;
				.thumb{
					width: 40%;
					height: 240rpx;
					image{
						width: 240rpx;
						height: 240rpx;
						border-radius: 10rpx;
					}
				}
				.item{
					width: 60%;
					height: 100%;
					border-bottom: 2rpx solid #f6f6f6;
					.title{
						display: flex;
						align-items: center;
						width: 100%;
						height: 100rpx;
						text{
							font-size: 26rpx;
							color: #222222;
						}
					}
					.price-more{
						display: flex;
						align-items: center;
						width: 100%;
						height: 80rpx;
						.price{
							font-size: 32rpx;
							color: $base;
							font-weight: bold;
						}
						.depreciate{
							display: flex;
							align-items: center;
							text{
								display: block;
								padding: 4rpx 8rpx;
								font-size: 24rpx;
								color: $base;
								border: 2rpx solid $base;
								border-radius: 20rpx;
								transform: scale(0.8);
							}
						}
					}
					.goods-btn{
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: 100%;
						height: 80rpx;
						.btn{
							display: flex;
							align-items: center;
							text{
								padding: 6rpx 14rpx;
								font-size: 24rpx;
								color: #555555;
								border: 2rpx solid #C0C0C0;
								border-radius: 60rpx;
								margin-right: 20rpx;
							}
						}
						.cart{
							display: flex;
							align-items: center;
							padding: 10rpx;
							border: 2rpx solid $base;
							border-radius: 100%;
							text{
								font-size: 34rpx;
								color: $base;
							}
						}
					}
				}
			}
		}
	}
}

//看相似商品弹窗
.goods-win{
	.cu-dialog{
		width: 100%;
		height: 70%;
		border-radius: 20rpx 20rpx 0 0 !important;
	}
	.goods-title{
		display: flex;
		align-items: center;
		padding: 0 4%;
		height: 100rpx;
		.title{
			font-size: 28rpx;
			color: #222222;
		}
	}
	.goods-list{
		padding: 0 4%;
		.list{
			display: flex;
			align-items: center;
			width: 100%;
			height: 200rpx;
			background-color: #FFFFFF;
			box-shadow: 0 0 20rpx #f6f6f6;
			border-radius: 10rpx;
			overflow: hidden;
			margin-bottom: 20rpx;
			.thumb{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30%;
				height: 200rpx;
				image{
					width: 170rpx;
					height: 170rpx;
					border-radius: 10rpx;
				}
			}
			.item{
				width: 70%;
				height: 100%;
				.title{
					display: flex;
					align-items: center;
					width: 100%;
					height: 100rpx;
					text{
						color: #222222;
						font-size: 26rpx;
						text-align: left;
					}
				}
				.price-look{
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					height: 100rpx;
					.price{
						font-size: 32rpx;
						color: $base;
					}
					.look{
						display: flex;
						align-items: center;
						margin-right: 20rpx;
						text{
							padding: 4rpx 10rpx;
							border: 2rpx solid #555555;
							color: #555555;
							font-size: 24rpx;
							border-radius: 60rpx;
						}
					}
				}
			}
		}
	}
}


/* 底部 */
.footer-btn{
	position: fixed;
	left: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 80rpx;
	background-color: #FFFFFF;
	.btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 90%;
		height: 70rpx;
		background: linear-gradient(to right,$base,$change-clor);
		border-radius: 70rpx;
		font-size: 28rpx;
		color: #FFFFFF;
	}
}
</style>
